<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org">
<head>
  <title>房间玩家管理</title>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" media="all" href="/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" media="all" href="/layui/css/layui.css">
  <script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/layui/layui.js"></script>
</head>
<script>
  function updateValues(ID){
    $("#UpdateID").val(ID);
  }
  function deleteValues(ID){
    $("#DeleteID").val(ID);
  }
  function LeaveRoom(ID){
    id = ID;
    roomID = $("#roomID").val();
    data = {
      id: id,
      roomID: roomID
    }
    $.ajax({
      url:"leaveRoom",
      type: "Post",
      data: data,
      datatype: "html",
      success:function (data, status) {
        $("#roomInformation").replaceWith(data);
      }
    })
  }
  function SearchUser() {
    var userInfo = $("#userSearch").val();
    data = {
      userInfo: userInfo
    }
    $.ajax({
      url:"/userSearch",
      type: "Post",
      data: data,
      datatype: "html",
      success: function (data, status) {

      }
    })
  }
  function Back(){
    $.ajax({
      url:"/selectAllRoom",
      type: "Post",
      success: function(data, status) {
        $("#roomInformation").replaceWith(data);
      }
    })
  }
</script>
<body>
<div class="container mt-3" id="roomInformation">
  <h2>房间管理界面</h2>
  <br>
  <ul class="nav nav-pills" role="tablist">
    <li class="navbar-form navbar-left" role="search">
      <a class="form-group">
        <input type="text" class="form-control" id="userSearch" placeholder="搜索相关用户"/>
      </a>
    </li>

    <li><button type="submit" class="btn btn-default" onclick="SearchUser()">搜索</button></li>

    <li class="pagination"><button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#add">添加用户</button></li>
    <li><button type="button" class="btn btn-light btn-sm" onclick="Back()">返回</button></li>
    <li><input id="roomID" name="roomID" th:value="${roomID}" style="display: none"></li>

  </ul>

  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <table class="table table-bordered">
        <thead>
        <tr>
          <th>用户号</th>
          <th>账号</th>
          <th>用户名</th>
          <th>性别</th>
          <th>照片</th>
          <th>手机</th>
          <th>邮箱</th>
          <th>注册时间</th>
          <th>退出房间</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user:${users}">
          <td th:text="${user.id}"></td>
          <td th:text="${user.account}"></td>
          <td th:text="${user.username}"></td>
          <td th:if="${user.sex}==1">男</td>
          <td th:if="${user.sex}==0">女</td>
          <td><button type="button" class="btn btn-light btn-sm">查看</button></td>
          <td th:text="${user.phone}"></td>
          <td th:text="${user.email}"></td>
          <td th:text="${user.registerDate}"></td>
          <td><button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#fire" th:onclick="|javascript:LeaveRoom('${user.id}')|">退出房间</button></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal picture" id="photo">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">

      <div class="modal-header">
        <h3 class="modal-title">玩家头像</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        一张图片....
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>

<div class="modal alter" id="change">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="width:650px">

      <div class="modal-header">
        <h3 class="modal-title">用户信息</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <table class="table table-borderless">
          <tr>
            <td style="font-size:22px">被修改用户号</td><td><input readonly="readonly" id="UpdateID" name="UpdateID" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">密码</td><td><input id="UpdatePassword" name="UpdatePassword" placeholder=请输入新密码 type="password" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">用户名</td><td><input id="UpdateUsername" name="UpdateUsername" placeholder=请输入新用户名 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">性别</td><td><input id="UpdateSex" name="UpdateSex" placeholder=请输入性别 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">手机</td><td><input id="UpdatePhone" name="UpdatePhone" placeholder=请输入新手机 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">邮箱</td><td><input id="UpdateEmail" name="UpdateEmail" placeholder=请输入新邮箱 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
        </table>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="UpdateUser()">确定</button>
      </div>

    </div>
  </div>
</div>

<div class="modal Add" id="add">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="width:650px">

      <div class="modal-header">
        <h3 class="modal-title">用户信息</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <table class="table table-borderless">
          <tr>
            <td style="font-size:22px">账号</td><td><input id="AddAccount" name="AddAccount" placeholder=请输入账号 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">密码</td><td><input id="AddPassword" name="AddPassword" placeholder=请输入密码 type="password" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">用户名</td><td><input id="AddUsername" name="AddUsername" placeholder=请输入用户名 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">性别</td><td><input id="AddSex" name="AddSex" placeholder=请输入性别 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">手机</td><td><input id="AddPhone" name="AddPhone" placeholder=请输入手机 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px">邮箱</td><td><input id="AddEmail" name="AddEmail" placeholder=请输入邮箱 type="text" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
        </table>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="AddUser()">确定</button>
      </div>

    </div>
  </div>
</div>

<div class="modal Fire" id="fire">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="width:650px">

      <div class="modal-header">
        <h3 class="modal-title" style="color: red">注销用户</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <table class="table table-bordered">
          <thead>
          </thead>
          <tbody>
          <tr>
            <td style="font-size:22px">用户号</td><td><input readonly="readonly" id="DeleteID" name="DeleteID" style="height:32px;width:300px;font-size:22px"></td>
          </tr>
          <tr>
            <td style="font-size:22px;color: red">真的要注销该用户吗？</td><td style="height:32px;width:300px;font-size:22px;color: red">该账号将永久无法使用（真的很久）</td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="DeleteEmployee()">是</button>
      </div>

    </div>
  </div>
</div>
</body>
</html>